<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/pages/header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人详情页</title>
<style type="text/css">
	img {
		width: 100px;
	}
</style>
</head>
<body>
<div style="height: 40px;line-height: 40px">
	<a href="/day39/goods/toMainPage">回到首页</a>
</div>
	<form action="user/updateUserInfo" method="post">
		<table>
			<tr>
				<td>头像</td>
				<td>
					<img id="tx" alt="touxiang" src="${userInfo.inco }" onclick="opFile()">
					<input type="file" id="file" onchange="upload()" style="display: none">
					<input type="hidden" id="inco" name="inco" value="${userInfo.inco }">
				</td>
			</tr>
			<tr>
				<td>昵称</td>
				<td>
					<input id="nickName" name="nickName" value="${userInfo.nickName }">
				</td>
			</tr>
			<tr>
				<td>手机号</td>
				<td>
					<input id="cellphone" name="cellphone" value="${userInfo.cellphone }">
				</td>
			</tr>
			<tr>
				<td>qq</td>
				<td>
					<input id="qq" name="qq" value="${userInfo.qq }">
				</td>
			</tr>
			<tr>
				<td>邮箱</td>
				<td>
					<input id="email" name="email" value="${userInfo.email }">
				</td>
			</tr>
			<tr>
				<td>
					<input type="submit" >
				</td>
				
			</tr>
		</table>
	</form>
	<hr/> 
	<span style="font-size: 20px;font-weight: 600">收货地址</span> <a href="javascript:void(0)" onclick="showAdd()">添加收货地址</a>
	
	<div id="addAddress" style="display: none;">
		姓名:<input id="a_r_name" value="${item.r_name }">
		联系电话:<input id="a_cellphone" value="${item.cellphone }">
		真实地址:<input id="a_address" value="${item.address }" style="width: 300px;">	
		<a href="javascript:void(0)" onclick="addAddress()">提交</a>
		<a href="javascript:void(0)" onclick="cancel()">取消</a>
	</div>
	
	<c:forEach items="${addressList }" var="item">
		<div>
			<c:if test="${item.isdefault==1 }">
				<input type="checkbox" checked="checked" disabled="disabled">
			</c:if>
			<c:if test="${item.isdefault!=1 }">
				<input type="checkbox" onchange="changeDefault(${item.id })">
			</c:if>
			姓名:<input class="r_name" value="${item.r_name }"><br>
			联系电话:<input class="cellphone" value="${item.cellphone }"><br>
			真实地址:<input class="address" value="${item.address }" style="width: 300px;">
			<a href="javascript:void(0)" onclick="showEdit(this)">修改</a>
			<span class="edit" style="display: none">
				<a href="javascript:void(0)" onclick="updateAddress(${item.id},this)">提交修改</a> &nbsp;&nbsp;
				<a href="javascript:void(0)" onclick="deleteById(${item.id})">删除</a>
			</span>
		</div>
	</c:forEach>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	
	function showEdit(th){
		var $p = $(th).parent(); //获取修改按钮的父标签
		$(th).hide(); //将自身隐藏起来
		$p.children(".edit").eq(0).show(); //将父标签下的 class名称为 edit的标签显示出来
	}
	
	//使用跳转的形式修改默认收货地址
	function changeDefault(id){
		location.href="address/addressChangeDefault?id="+id;
	}
	

	//修改收货地址
	function updateAddress(id,th){
		//获取提交修改按钮的父级的父级
		var $p = $(th).parent().parent();
		//获取当前div下的收件人输入框
		var r_name = $p.children(".r_name").eq(0).val();
		if(r_name==undefined||r_name.trim()==""){
			alert("对不起,收件人不能为空");
			return;
		}
		var cellphone = $p.children(".cellphone").eq(0).val();
		if(cellphone==undefined||cellphone.trim()==""){
			alert("对不起,电话号码不能为空");
			return;
		}
		var address = $p.children(".address").eq(0).val();
		if(address==undefined||address.trim()==""){
			alert("对不起,地址不能为空");
			return;
		}
		
		$.ajax({
			url:"address/updateAddressById",
			type:"post",
			data:{"r_name":r_name,"cellphone":cellphone,"address":address,"id":id},
			dataType:"json",
			success:function(data){
				//服务端返回3表示未登录, 手动跳转登录页面
				if(data.code==3){
					location.href="pages/login.jsp";
				}else if(data.code==1){
					location.reload();//修改成功, 刷新当前页面
				}else{
					alert(data.message);
				}
			}
		})
		
	}
	//添加新的收货地址
	function addAddress(){
		var r_name = $("#a_r_name").val();
		if(r_name==undefined||r_name.trim()==""){
			alert("对不起,收件人不能为空");
			return;
		}
		var cellphone = $("#a_cellphone").val();
		if(cellphone==undefined||cellphone.trim()==""){
			alert("对不起,电话号码不能为空");
			return;
		}
		var address = $("#a_address").val();
		if(address==undefined||address.trim()==""){
			alert("对不起,地址不能为空");
			return;
		}
		
		$.ajax({
			url:"address/addAddress",
			type:"post",
			data:{"r_name":r_name,"cellphone":cellphone,"address":address},
			dataType:"json",
			success:function(data){
				if(data.code==3){
					location.href="pages/login.jsp";
				}else if(data.code==1){
					location.reload();
				}else{
					alert(data.message);
				}
			}
		})
		
	}
	//隐藏添加地址框
	function cancel(){
		$("#addAddress").hide(500);
	}
	//显示添加地址框
	function showAdd(){
		$("#addAddress").show(500);
	}
	//根据id删除收货地址
	function deleteById(id){
		
		$.ajax({
			url:"address/deleteById",
			type:"post",
			data:{"id":id},
			dataType:"json",
			success:function(data){
				if(data.code==3){
					location.href="pages/login.jsp";
				}else if(data.code==1){
					location.reload();
				}else{
					alert(data.message);
				}
			}
		})
		
	}


	//打开文件选择框
	function opFile(){
		$("#file").click();
	}
	//异步上传头像
	function upload(){
		var fd = new FormData();
		fd.append("file",$("#file")[0].files[0]);
		
		$.ajax({
			url:"http://localhost:8090/imgServer/upload",
			type:"post",
			data:fd,
			contentType:false,
			processData:false,
			dataType:"json",
			success:function(data){
				$("#tx").attr("src",data.data[0]);
				$("#inco").val(data.data[0]);
			}
		})
	}

</script>
</html>